<template>
	<view class="form-container">
		<!-- 表单内容 -->
		<view class="form-content">
			<!-- 车辆信息 -->
			<view class="form-section">
				<view class="section-title">车辆信息</view>
				
				<view class="form-item">
					<text class="form-label">车牌号 <text class="required">*</text></text>
					<input 
						class="form-input" 
						v-model="formData.licensePlate" 
						placeholder="请输入车牌号"
						:disabled="isViewMode"
					/>
				</view>
				
				<view class="form-item">
					<text class="form-label">驾驶员姓名 <text class="required">*</text></text>
					<input 
						class="form-input" 
						v-model="formData.driverName" 
						placeholder="请输入驾驶员姓名"
						:disabled="isViewMode"
					/>
				</view>
				
				<view class="form-item">
					<text class="form-label">驾驶员手机号 <text class="required">*</text></text>
					<input 
						class="form-input" 
						v-model="formData.driverPhone" 
						placeholder="请输入手机号"
						type="number"
						:disabled="isViewMode"
					/>
				</view>
			</view>
		</view>
		
		<!-- 操作按钮 -->
		<view class="action-buttons" v-if="!isViewMode">
			<button class="btn btn-cancel" @click="handleCancel">取消</button>
			<button class="btn btn-submit" @click="handleSubmit">保存</button>
		</view>
		
		<view class="action-buttons" v-else>
			<button class="btn btn-edit" @click="handleEdit">编辑</button>
			<button class="btn btn-delete" @click="handleDelete">删除</button>
			<button class="btn btn-back" @click="handleBack">返回</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isViewMode: false, // 是否为查看模式
				currentId: null, // 当前车辆ID
				formData: {
					licensePlate: '',
					driverName: '',
					driverPhone: ''
				}
			}
		},
		
		onLoad(options) {
			// 如果有ID参数，说明是查看/编辑模式
			if (options.id) {
				this.currentId = options.id;
				this.isViewMode = true;
				this.loadData(options.id);
			}
		},
		
		methods: {
			// 加载数据
			async loadData(id) {
				if (!id) return;
				
				uni.showLoading({
					title: '加载中...'
				});
				
				try {
					const res = await this.$api.car.read(id);
					console.log('车辆详情:', res);
					
					if (res && res.id) {
						// 保存当前ID
						this.currentId = res.id;
						
						// 填充表单数据（使用下划线字段名）
						this.formData = {
							licensePlate: res.license_plate || '',
							driverName: res.driver_name || '',
							driverPhone: res.driver_phone || ''
						};
					} else {
						uni.showToast({
							title: '数据不存在',
							icon: 'none'
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					}
				} catch (error) {
					console.log('加载车辆详情失败:', error);
					uni.showToast({
						title: '加载失败，请重试',
						icon: 'none'
					});
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				} finally {
					uni.hideLoading();
				}
			},
			
			// 取消操作
			handleCancel() {
				uni.navigateBack();
			},
			
			// 保存数据
			async handleSubmit() {
				// 表单验证
				if (!this.formData.licensePlate) {
					uni.showToast({
						title: '请输入车牌号',
						icon: 'none'
					});
					return;
				}
				
				if (!this.formData.driverName) {
					uni.showToast({
						title: '请输入驾驶员姓名',
						icon: 'none'
					});
					return;
				}
				
				if (!this.formData.driverPhone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return;
				}
				
				// 手机号格式验证
				const phoneReg = /^1[3-9]\d{9}$/;
				if (!phoneReg.test(this.formData.driverPhone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return;
				}
				
				uni.showLoading({
					title: '保存中...'
				});
				
				try {
					// 准备提交的数据（转换为下划线格式）
					const submitData = {
						license_plate: this.formData.licensePlate,
						driver_name: this.formData.driverName,
						driver_phone: this.formData.driverPhone
					};
					
					let res;
					if (this.currentId) {
						// 更新现有车辆
						res = await this.$api.car.update(this.currentId, submitData);
					} else {
						// 创建新车辆
						res = await this.$api.car.create(submitData);
					}
					
					console.log('保存结果:', res);
					
					uni.hideLoading();
					uni.showToast({
						title: this.currentId ? '更新成功' : '创建成功',
						icon: 'success'
					});
					
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
					
				} catch (error) {
					console.log('保存失败:', error);
					uni.hideLoading();
					uni.showToast({
						title: '保存失败，请重试',
						icon: 'none'
					});
				}
			},
			
			// 编辑模式
			handleEdit() {
				this.isViewMode = false;
			},
			
			// 删除车辆
			async handleDelete() {
				if (!this.currentId) {
					uni.showToast({
						title: '无法删除',
						icon: 'none'
					});
					return;
				}
				
				uni.showModal({
					title: '确认删除',
					content: '确定要删除这个车辆吗？删除后无法恢复。',
					confirmText: '删除',
					confirmColor: '#FF3B30',
					success: async (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '删除中...'
							});
							
							try {
								await this.$api.car.delete(this.currentId);
								
								uni.hideLoading();
								uni.showToast({
									title: '删除成功',
									icon: 'success'
								});
								
								setTimeout(() => {
									uni.navigateBack();
								}, 1500);
								
							} catch (error) {
								console.log('删除失败:', error);
								uni.hideLoading();
								uni.showToast({
									title: '删除失败，请重试',
									icon: 'none'
								});
							}
						}
					}
				});
			},
			
			// 返回
			handleBack() {
				uni.navigateBack();
			}
		}
	}
</script>

<style scoped>
.form-container {
	min-height: 100vh;
	background-color: #F5F5F5;
	padding-bottom: 160rpx;
}

.form-content {
	padding: 30rpx;
}

.form-section {
	background-color: white;
	border-radius: 16rpx;
	margin-bottom: 20rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 30rpx;
	padding-bottom: 20rpx;
	border-bottom: 2rpx solid #007AFF;
}

.form-item {
	margin-bottom: 30rpx;
}

.form-item:last-child {
	margin-bottom: 0;
}

.form-label {
	display: block;
	color: #333;
	font-size: 28rpx;
	font-weight: 500;
	margin-bottom: 20rpx;
}

.required {
	color: #FF4D4F;
}

.form-input {
	width: 100%;
	height: 80rpx;
	border: 2rpx solid #E5E5E5;
	border-radius: 8rpx;
	padding: 0 20rpx;
	font-size: 28rpx;
	color: #333;
	background-color: #FAFAFA;
}

.form-input:focus {
	border-color: #007AFF;
	background-color: white;
}

.form-textarea {
	width: 100%;
	min-height: 120rpx;
	border: 2rpx solid #E5E5E5;
	border-radius: 8rpx;
	padding: 20rpx;
	font-size: 28rpx;
	color: #333;
	background-color: #FAFAFA;
}

.form-textarea:focus {
	border-color: #007AFF;
	background-color: white;
}

.picker-input {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 80rpx;
	border: 2rpx solid #E5E5E5;
	border-radius: 8rpx;
	padding: 0 20rpx;
	background-color: #FAFAFA;
}

.picker-text {
	font-size: 28rpx;
	color: #333;
}

.picker-text.placeholder {
	color: #999;
}

.picker-arrow {
	font-size: 24rpx;
	color: #999;
}

.action-buttons {
	display: flex;
	padding: 30rpx;
	gap: 20rpx;
	background-color: white;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.btn {
	flex: 1;
	height: 80rpx;
	border-radius: 8rpx;
	font-size: 30rpx;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn-cancel {
	background-color: #F5F5F5;
	color: #666;
}

.btn-submit {
	background-color: #007AFF;
	color: white;
}

.btn-edit {
	background-color: #FF9500;
	color: white;
}

.btn-back {
	background-color: #F5F5F5;
	color: #666;
}

.btn-delete {
	background-color: #FF3B30;
	color: white;
}

.btn:active {
	opacity: 0.8;
}
</style>
